<template>
  <div>
    <el-form-item v-for="fromItem of formItems" :key="fromItem.label" :prop="fromItem.value" :label="fromItem.label"
                  :rules="fromItem.rules"
    >
      <template v-if="fromItem.type==='input'">
        <el-input
          v-model="form[fromItem.value]"
          :disabled="fromItem.disabled"
          :placeholder="fromItem.label"
        />
      </template>
      <template v-if="fromItem.type==='input-number'">
        <el-input-number
          style="width: 100%"
          v-model="form[fromItem.value]"
          :controls="false"
          :disabled="fromItem.disabled"
          :placeholder="fromItem.label"
        />
      </template>
      <template v-if="fromItem.type==='input-textarea'">
        <el-input
          type="textarea"
          v-model="form[fromItem.value]"
          :disabled="fromItem.disabled"
          :placeholder="fromItem.label"
        />
      </template>
      <template v-if="fromItem.type==='date'">
        <el-date-picker
          style="width: 100%"
          v-model="form[fromItem.value]"
          type="datetime"
          clearable
          :placeholder="fromItem.label"
          :format="fromItem.format"
          :value-format="fromItem.format"
        />
      </template>
      <template v-if="fromItem.type ==='select'">
        <el-select
          style="width: 100%"
          v-model="form[fromItem.value]"
          :placeholder="fromItem.label"
          :disabled="fromItem.disabled"
        >
          <el-option
            v-for="item in fromItem.options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template v-if="fromItem.type==='bankSelect'">
        <div>
          <el-select
            style="width: 90%"
            :value="form[fromItem.value]"
            :placeholder="fromItem.label"
            @change="changeBankInfo"
          >
            <el-option
              v-for="item in bankOptions"
              :key="item.id"
              :label="item.bankName"
              :value="item.bankName"
            />
          </el-select>
          <el-button type="text" style="margin-left: 10px" @click="$refs.bankConfigRef.dialogVisible = true">
            管理
          </el-button>
        </div>
      </template>
    </el-form-item>
    <bank-config ref="bankConfigRef" @refurbish="getBankOptions"/>
  </div>
</template>

<script>
import {
  IN_TREASURY,
  AUCTION,
  DESTROY,
  LONG_TIME_SAVE,
  RETURN_PARTIES,
  SELL_OFF
} from './disposalFormList'
import BankConfig from '@/views/wms/deal/register/form/bankConfig'
import { getDisposalBankConfigList } from '@/api/sacw/dispose'

export default {
  name: 'CustomizeDisposalForm',
  components: { BankConfig },
  props: {
    form: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      formItems: undefined,
      bankOptions: []
    }
  },
  watch: {
    'form.disposalStat': {
      handler(value) {
        this.formItems = this.getFormItems(value)
      },
      immediate: true
    }
  },
  created() {
    if (this.form.disposalStat === '5') {
      this.form.dealPerson = '三明市涉案财物跨部门集中管理中心'
    }
    this.formItems = this.getFormItems(this.form.disposalStat)
    this.getBankOptions()
  },
  methods: {
    changeBankInfo(value) {
      const find = this.bankOptions.find(item => item.bankName === value)
      this.form.accountBank = value
      this.form.depAcc = find.bankAccount
      this.form.accountOrg = find.accountOrg
      this.form.accountType = find.accountType
      getDisposalBankConfigList().then(res => {
        this.bankOptions = res.data
      })
    },
    getBankOptions() {
      this.form.depAcc = undefined
      this.form.accountOrg = undefined
      this.form.accountType = undefined
      this.form.accountBank = undefined
      getDisposalBankConfigList().then(res => {
        this.bankOptions = res.data
      })
    },
    getFormItems(value) {
      switch (value) {
        case '1':
          return IN_TREASURY
        case '5':
          return AUCTION
        case '6':
          return DESTROY
        case '2':
          return LONG_TIME_SAVE
        case '3':
          return RETURN_PARTIES
        case '4':
          return SELL_OFF
        default:
          return null
      }
    }
  }
}
</script>

<style scoped>

</style>
